// 引入 wangEditor
import E from 'wangeditor' // npm 安装
// const E = window.wangEditor // CDN 引入的方式
// import bindEvent from './bindEvent.js'
// 获取必要的变量，这些在下文中都会用到
const {
    $,
    BtnMenu,
    DropListMenu,
    PanelMenu,
    DropList,
    Panel,
    Tooltip
} = E



function createShowHideFn(editor) {
    let tooltip = Tooltip | null
    /**
     * 显示 tooltip
     * @param $link 链接元素
     */
    function showImageExtendsTooltip($node) {

        const conf = [{
                $elem: $("<span class='w-e-icon-trash-o'></span>"),
                onClick: (editor, $node) => {
                    // 选中img元素
                    editor.selection.createRangeByElem($node)
                    editor.selection.restoreSelection()
                    editor.cmd.do('delete')
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>30%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '30%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>50%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '50%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $('<span>100%</span>'),
                onClick: (editor, $node) => {
                    $node.attr('width', '100%')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            },
            {
                $elem: $(`<span>重置</span>`),
                onClick: (editor, $node) => {
                    $node.removeAttr('width')
                    $node.removeAttr('height')

                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            }
        ]


        if ($node.attr('data-href')) {
            conf.push({
                $elem: $(`<span>查看链接</span>`),
                onClick: (editor, $node) => {
                    let link = $node.attr('data-href')
                    if (link) {
                        link = decodeURIComponent(link)
                        window.open(link, '_target')
                    }
                    // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
                    return true
                },
            })
        }

        console.error("----", conf)

        // 创建 tooltip
        tooltip = new Tooltip(editor, $link, conf)
        tooltip.create()
    }

    /**
     * 隐藏 tooltip
     */
    function hideImageExtendsTooltip() {
        // 移除 tooltip
        if (tooltip) {
            tooltip.remove()
            tooltip = null
        }
    }

    return {
        showImageExtendsTooltip,
        hideImageExtendsTooltip,
    }
}

/**
 * 绑定 tooltip 事件
 * @param editor 编辑器实例
 */
function bindEvent(editor) {
    const {
        showImageExtendsTooltip,
        hideImageExtendsTooltip
    } = createShowHideFn(editor)

    // 图片被点击事件
    editor.txt.eventHooks.imgClickEvents.push(showImageExtendsTooltip)

    // 点击其他地方，或者滚动时，隐藏 tooltip
    editor.txt.eventHooks.clickEvents.push(hideImageExtendsTooltip)
    // 点击链接事件
    editor.txt.eventHooks.linkClickEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.keyupEvents.push(hideImageExtendsTooltip)
    // 菜单栏被点击
    editor.txt.eventHooks.toolbarClickEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.menuClickEvents.push(hideImageExtendsTooltip)
    // 编辑区域滑动事件
    editor.txt.eventHooks.textScrollEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.imgDragBarMouseDownEvents.push(hideImageExtendsTooltip)
    editor.txt.eventHooks.changeEvents.push(hideImageExtendsTooltip)
}
// 【注意】如果版本 <= v4.0.5 需要这样写：
// const { $ } = E
// const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors// 第一，菜单 class ，Button 菜单继承 BtnMenu class
class AlertMenu extends BtnMenu {
    constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = E.$(
            `<div class="w-e-menu" data-title="Alert">
                <i class="w-e-icon-image"></i>
            </div>`
        )

        super($elem, editor)
        // bindEvent(editor)
    }
    // 菜单点击事件
    clickHandler(e) {
       
        Vue.prototype.$vFN.Directives.SelectResourcesImage({
            onSuccess: (res) => {

                res.data.forEach(item => {
                    this.editor.cmd.do('insertHTML', '<img src='+item+' style="max-width: 100%;"/>')
                    // this.editor.cmd.do('insertHTML', '24242424')
                })
            },

        });
        // console.error("editor", );
        // this.editor.cmd.do('insertHTML', '<img src="http://data.lincson.cn/test/1.jpg" style="max-width: 100%;"/>')
        // 做任何你想做的事情
        // 可参考【常用 API】文档，来操作编辑器
        // console.error("editor.selection.getSelectionText()",editor.selection.getSelectionText())
        // alert('hello world')
    }
    // 菜单是否被激活（如果不需要，这个函数可以空着）
    // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
    // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
    tryChangeActive() {
        console.error("tryChangeActive-img")
        // 激活菜单
        // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
        // 2. this.this.isActive === true
        // this.active()

        // // 取消激活菜单
        // // 1. 菜单 DOM 节点会删掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
    }
}



export default AlertMenu